<?PHP
session_start();
if (!(isset($_SESSION['login']) && $_SESSION['login'] != '')) {
    $loggedIn = false;
} else{
    $loggedIn = true;
}
?>
<header id="header">
    <table style="border: 0px; width: 15%; height: 100%;">
        <tr>
            <td style="padding-left: 20px;"><a href="../pages/index.php"><img id="logo" src="../resources/images/logo.png"></a></td>
        </tr>
    </table>
    <ul id="headerMenu">
        <li>
            <button>Bars</button>
            <ul>
                <li><button onclick="location.href='../admin/addBars.php'">Add Bars</button></li>
                <li><button onclick="location.href='../admin/barOverview.php'">Bar Overview</button></li>
            </ul>
        </li>
        <li>
            <button>Users</button>
            <ul>
                <li> <button onclick="location.href='../admin/addUsers.php'">Add User</button></li>
                <li><button onclick="location.href='../admin/userOverview.php'">User Overview</button></li>
            </ul>
        </li>
        <li>
            <button>Statistics</button>
            <ul>
                <li> <button onclick="location.href='../admin/barStats.php'">Bar Statistics</button></li>
                <li> <button onclick="location.href='../admin/userStats.php'">User Statistics</button></li>
            </ul>
        </li>
        <?php
            if($loggedIn){
                echo "<li><button id='logOutBtnHeader'>{$_SESSION['firstName']} {$_SESSION['lastName']}</button>
                        <ul>
                            <li><button>Profile</button></li>
                            <li><button onclick='logout()'>Log Out</button></li>
                        </ul>
                      </li>";
            } else{
               echo '<li><button id="logInBtnHeader" onclick="showLogInDialog();">Log In</button></li>';
            }
        ?>        
        <li>
            <div id="loggedInUserHeader"></div>
        </li>
    </ul>
    <div id="outOfLogInDialog">
        <div id="logInDialog">
            <div id="logInDialogHeader">Please Log In</div>
            <table>
                <tr>
                    <td><span class="v-align-middle">Email:</span></td>
                    <td><input type="email" id="logInEmail"></input></td>
                    <td><img id="email-error" class="hidden v-align-middle" src="../resources/images/error.svg"><img id="email-check" class="hidden v-align-middle" src="../resources/images/check.svg"></td>
                </tr>
                <tr>
                    <td><span class="v-align-middle">Password:</span></td>
                    <td><input type="password" id="logInPassword"></input></td>
                    <td><img id="pw-error" class="hidden v-align-middle" src="../resources/images/error.svg"><img id="pw-check" class="hidden v-align-middle" src="../resources/images/check.svg"></td>
                </tr>
                <tr>
                    <td><button id="confirmLoginBtn" class="disabled">Log In</button></td>
                    <td><button id="cancelLoginBtn">Cancel</button></td>
                </tr>
            </table>
            <div style="text-align: left;"><a id="forgotPassword" onclick="showSendNewPassword();">Forgot password?</a></div>
            <table id="sendPasswordTable">
                <tr>
                    <td><input id="sendPasswordInput" placeHolder="Your Email"></input></td>
                    <td><button id="sendPasswordBtn">Send</button></td>
                </tr>
            </table>
        </div>
    </div>
</header>